<template>
  <div>
    <nav-bar
      :title="title"
      :isShow="false"
      :leftArrow="false"
      leftText=""
    ></nav-bar>
    <div class="img_outer">
      <van-image width="100%" height="200" :src="retailer_img" />
      <h4 class="title">{{ name }}</h4>
    </div>

    <my-point :is_link="true"></my-point>
    <van-cell-group>
      <van-cell
        v-if="employee == 0"
        size="large"
        title="积分充值"
        is-link
        :value="points"
        :to="{ name: 'RetailerPoints', params: { retailer_id: retailer_id } }"
      />
      <van-cell v-else size="large" title="积分充值" :value="points" />
      <van-cell
        size="large"
        title="积分赠送"
        is-link
        value="赠送客户积分"
        :to="{ name: 'Bonus', params: { retailer_id: retailer_id } }"
      />
      <van-cell
        v-if="employee == 0"
        size="large"
        title="员工授权"
        is-link
        value="授予赠送积分权限"
        :to="{ name: 'EmployeeAuth', params: { retailer_id: retailer_id } }"
      />
      <van-cell
        v-if="employee == 0"
        size="large"
        title="账单查询"
        is-link
        value="查看充值与赠送积分情况"
        :to="{ name: 'Bill', params: { retailer_id: retailer_id } }"
      />
      <van-cell
        v-if="employee > 0"
        size="large"
        title="账单查询"
        is-link
        value="赠送积分情况"
        :to="{ name: 'EmployeeBill', params: { retailer_id: retailer_id } }"
      />
    </van-cell-group>
    <van-list
      v-if="employee == 0"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell-group title="授权员工列表">
        <van-swipe-cell v-for="item in employees" :key="item.id">
          <van-cell
            :key="item.id"
            :title="item.name + '[' + item.telephone + ']'"
            :value="item.branch"
            :label="item.begin_date + ' 至 ' + item.end_date"
          >
          </van-cell>
          <template #right>
            <van-button
              class="swipe-cell-button"
              square
              type="primary"
              text="延期"
              @click="onShow(item.id)"
            />
            <van-button
              class="swipe-cell-button"
              square
              type="danger"
              text="取消"
              @click="onCancel(item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-cell-group>
    </van-list>
    <van-dialog
      v-model="show"
      title="商家审核"
      show-cancel-button
      @confirm="onConfirmDelay"
    >
      <van-field
        readonly
        clickable
        name="end_date"
        :value="end_date"
        label="结束时间"
        placeholder="点击选择日期"
        @click="showCalendar = true"
      />
    </van-dialog>

    <van-calendar
      v-model="showCalendar"
      :max-date="maxDate"
      @confirm="onConfirm"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import NavBar from "@/components/NavBar";
import MyPoint from "@/components/MyPoint";
import { formatDateTime } from "@/utils/datetime";
import {
  getWxRetailerInfo,
  getEmployees,
  deleteEmployee,
  updateEmployee,
} from "@/api/member";
import retailer from "@/assets/images/retailer.png";

export default {
  name: "Retailer",
  components: {
    NavBar,
    MyPoint,
  },
  computed: {
    ...mapGetters(["retailer_id", "retailer_name", "employee"]),
    maxDate() {
      let datetime = new Date();
      datetime = datetime.setFullYear(datetime.getFullYear() + 2);
      return new Date(datetime);
    },
  },

  data() {
    return {
      title: this.$route.meta.title,
      points: 0,
      name: this.retailer_name,
      retailer_img: retailer,
      employees: [],
      employee_id: null,
      loading: false,
      finished: false,
      show: false,
      showCalendar: false,
      end_date: null,

      listQuery: {
        page: 1,
        page_size: 10,
        retailer_id: this.retailer_id,
      },
    };
  },
  mounted() {
    this.getRetailerInfo();
    console.log(this.retailer_id);
  },
  methods: {
    getRetailerInfo() {
      getWxRetailerInfo()
        .then((res) => {
          const data = res.data;
          if (data.status_code == 200) {
            this.points = data.retailer.score || 0;
            this.name = data.retailer.name;
          } else {
            this.$toast("获取信息失败!");
          }
        })
        .catch(() => {
          this.$toast("获取信息错误!");
        });
    },
    onLoad() {
      setTimeout(() => {
        this.getEmployeeList();
      }, 300);

    },
    getEmployeeList() {
      this.loading = true;
      this.listQuery.retailer_id = this.retailer_id;
      getEmployees(this.listQuery)
        .then((res) => {
          if (res.data.results.length == 0) {
            this.employees = [];
            this.finished = true;
          }
          this.listQuery.page = res.data.page;
          this.loading = false;
          this.employees.push(...res.data.results);
          if (this.employees.length >= res.data.count) {
            this.finished = true; // 结束加载状态
          }
        })
        .catch(() => {
          this.loading = false;
          this.finished = true;
          this.$toast("获取授权员工失败!");
        });
    },
    onShow(employee_id) {
      this.show = true;
      this.employee_id = employee_id;
    },
    onConfirm(date) {
      this.end_date = formatDateTime(date, "YYYY-MM-DD");
      this.showCalendar = false;
    },
    onConfirmDelay() {
      const data = {
        id: this.employee_id,
        end_date: this.end_date,
      };
      updateEmployee(data).then((res) => {
        const index = this.employees.findIndex((v) => v.id == res.data.id);
        this.employees.splice(index, 1, res.data);
        this.$toast.success("操作成功");
      });
    },
    onCancel(id) {
      this.$dialog
        .confirm({
          title: "取消授权确认",
          message: "真的要取消该员工的授权吗?",
        })
        .then(() => {
          // on confirm
          const params = {
            id: id,
            retailer_id: this.retailer_id,
          };
          deleteEmployee(params).then((res) => {
            if (res.status == 204) {
              const index = this.employees.findIndex((v) => v.id == id);
              this.employees.splice(index, 1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style  scoped>
.img_outer {
  margin: 0px;
  position: relative;
}
.title {
  position: absolute;
  text-align: center;
  left: 5px;
  top: 5px;
  margin: 0;
  color: yellow;
}
</style>